.wrapper {
  padding: 16px;
}
.container {
  width: 100%;
  padding: 0px 16px 50px 16px;
  box-sizing: border-box;
}
.camera {
  transform-style: preserve-3d;
  margin: 40px 0;
  perspective: 300px;
  perspective-origin: center bottom;
  width: 100px;
}

.card {
  width: 100px;
  height: 150px;
  position: relative;
  transform-style: preserve-3d;
  transition: all 1s;

  .role_picture {
    width: 100px;
    height: 150px;
    position: absolute;
    transition: all 1s;
  }

  .role_vertical {
    width: 100px;
    height: 150px;
    position: absolute;
    opacity: 0;
    transition: all 1s;
  }

  .font {
    color: #edc878;
    font-size: 14px;
    font-weight: bolder;
    position: absolute;
    bottom: 5px;
    width: 100%;
    transform: translateZ(40px);
    text-align: center;
    transition: all 1s;
    text-shadow: 2px 2px 0 #000000;
  }

  &.active {
    .role_picture {
      transform: rotateX(20deg);
      box-shadow: 0 5px 10px 2px rgba($color: #000000, $alpha: 0.5);
    }

    .role_vertical {
      transform: translateZ(30px) translateY(-25px);
      opacity: 1;
    }

    .font {
      transform: translateY(-10px) translateZ(40px);
    }
  }
}


.introduce {
  position: fixed;
  width: 50%;
  right: 32px;
  top: 16px;
}
.line {
  width: 100%;
  height: 5px;
  background-color: orange;
  margin: 24px 0;
}

.name {
  font-size: 20px;
}
.desc {
  margin-top: 16px;
}
.saying {
  margin-top: 16px;
  background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 100%;
  animation: shine 3s infinite linear;
}
@keyframes shine {
  0% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

.text {
  position: absolute;
  top: -10px;
  opacity: 0;
  transition: all 1s;
}
.show {
  top: 30px;
  opacity: 1;
}

.appear {
  position: absolute;
  top: -10px;
  opacity: 0;
  transition: all 1s;
}

.fade {
  top: 30px;
  opacity: 1;
}

